<template>
  <div class="singer">
    <!-- 入驻歌手头部 -->
    <h3 class="title">
      <span>入驻歌手</span>
      <a href="javascript:;">查看全部&gt</a>
    </h3>
    <!-- 入驻歌手列表 -->
    <ul>
      <li>
        <a href="javascipt:;">
          <!-- 装左边的图片 -->
          <div class="img">
            <img src="https://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="" />
          </div>
          <!-- 装右边的信息 -->
          <div class="info">
            <h4 class="fs14 f-thide">张惠妹aMEI</h4>
            <p class="f-thide">台湾歌手张惠妹</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascipt:;">
          <!-- 装左边的图片 -->
          <div class="img">
            <img src="https://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="" />
          </div>
          <!-- 装右边的信息 -->
          <div class="info">
            <h4 class="fs14 f-thide">张惠妹aMEI</h4>
            <p class="f-thide">台湾歌手张惠妹</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascipt:;">
          <!-- 装左边的图片 -->
          <div class="img">
            <img src="https://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="" />
          </div>
          <!-- 装右边的信息 -->
          <div class="info">
            <h4 class="fs14 f-thide">张惠妹aMEI</h4>
            <p class="f-thide">台湾歌手张惠妹</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascipt:;">
          <!-- 装左边的图片 -->
          <div class="img">
            <img src="https://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="" />
          </div>
          <!-- 装右边的信息 -->
          <div class="info">
            <h4 class="fs14 f-thide">张惠妹aMEI</h4>
            <p class="f-thide">台湾歌手张惠妹</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascipt:;">
          <!-- 装左边的图片 -->
          <div class="img">
            <img src="https://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="" />
          </div>
          <!-- 装右边的信息 -->
          <div class="info">
            <h4 class="fs14 f-thide">张惠妹aMEI</h4>
            <p class="f-thide">台湾歌手张惠妹</p>
          </div>
        </a>
      </li>
    </ul>
    <!-- 按钮 -->
    <a href="javascript:;" class="musician bg-border bg-border-1">
      <i class="bg-border-2">申请成为网易音乐人</i>
    </a>
  </div>
</template>

<script>
export default {
  name: 'StaySinger'
}
</script>

<style scoped>
.singer {
  margin-top: 15px;
  padding: 0 20px;
}
/* 列表头部 */
.title {
  display: flex;
  justify-content: space-between;
  width: 210px;
  height: 23px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
}
.title a {
  color: #666;
  font-weight: normal;
}
/* 列表内部 */
ul {
  margin-top: 6px;
}
ul li {
  margin-top: 14px;
}
ul li a {
  display: flex;
  background: #fafafa;
  text-decoration: none;
}
.img {
  width: 62px;
  height: 62px;
}
.info {
  width: 133px;
  height: 60px;
  padding-left: 14px;
  border: 1px solid #e9e9e9;
}
.info h4,
.info p {
  width: 90%;
  margin-top: 8px;
}
.fs14 {
  font-size: 14px;
}
/* 按钮部分 */
.musician {
  display: block;
  margin-top: 10px;
  width: 210px;
  height: 31px;
  line-height: 31px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  padding: 0 5px 0 0;
}
.bg-border {
  background: url(https://s2.music.126.net/style/web2/img/button2.png?d8faee391bb95079a765022182272fe6) no-repeat 0 9999px;
}
.bg-border-1 {
  background-position: 0 -59px;
}
.bg-border-2 {
  background-position: right -100px;
}
</style>
